<template>
    <div class="single-page">
        <!-- 表头 -->
        <div class="detail-head">

        </div>
        <!-- 项目信息 -->
        <div class="project-info">
            <a-divider>项目信息</a-divider>
            <div class="item-layout">
                <div class="left-label"><span style="color:red">*</span><label class="margin-left_5">项目来源：</label>
                </div>
                <div class="right-input">
                    <a-radio-group :options="formState.projectSource" v-model:value="formState.projectCheckedValue"
                        :disabled="true" />
                </div>
            </div>
            <div class="item-layout margin-top_20">
                <div class="left-label"><span style="color:red">*</span><label class="margin-left_5">项目阶段：</label>
                </div>
                <div class="right-input">
                    <a-select v-model:value="formState.levelSelected" size="middle" :options="formState.levelOptions"
                        :disabled="true" style="width:50%;text-align: left;">
                    </a-select>
                </div>
            </div>

            <div class="item-layout margin-top_20">
                <div class="left-label"><label class="margin-left_5">项目描述：</label>
                </div>
                <div class="right-input">
                    <a-textarea v-model:value="formState.descInputValue"
                        style="width:100%;height: 200px;background: #fff;" :disabled="true" />
                </div>
            </div>

            <div class="item-layout margin-top_20">
                <div class="left-label"><label class="margin-left_5">可发行地区/可授权权利：</label>
                </div>
                <div class="special-layout">
                    <div class="inner-layout">
                        <div class="inner-label">国内</div>
                        <div class="label-divider"></div>
                        <div class="margin-left_10">
                            <a-checkbox-group v-model:value="formState.inlandValue" name="inlandCheckBox"
                                :options="formState.inlandOptions" disabled="true" />
                        </div>
                    </div>
                    <div class="inner-layout">
                        <div class="inner-label">国外</div>
                        <div class="label-divider"></div>
                        <div class="margin-left_10">
                            <a-checkbox-group v-model:value="formState.inlandValue" name="inlandCheckBox"
                                :options="formState.inlandOptions" disabled="true" />
                        </div>
                    </div>
                </div>
            </div>

            <div class="item-layout margin-top_20">
                <div class="left-label">
                </div>
                <div class="border-layout">
                    <div class="inner-row">
                        <div class="inner-left_label"><label>独家/非独家</label></div>
                        <div class="inner-right_input">
                            <a-radio-group :options="formState.projectSource" v-model:value="formState.outSourceValue"
                                :disabled="true" />
                        </div>
                    </div>

                    <div class="inner-row margin-top_20">
                        <div class="inner-left_label"><label>备注</label></div>
                        <div class="inner-right_input">
                            <a-input v-model:value="formState.markInputValue" disabled="true" style="width: 70%;" />
                        </div>
                    </div>

                    <div class="inner-row margin-top_20">
                        <div class="inner-left_label"><label>可授权年限</label></div>
                        <div class="inner-right_input">
                            <a-range-picker v-model:value="formState.innerDateRange" @change="changeFunc"
                                @ok="okFunc" />
                        </div>
                    </div>

                    <div class="inner-row margin-top_20">
                        <div class="inner-left_label"><label>补充说明</label></div>
                        <div class="inner-right_input">
                            <a-input v-model:value="formState.markInputValue" disabled="true" style="width: 70%;" />
                        </div>
                    </div>
                </div>
            </div>

            <div class="item-layout margin-top_20">
                <div class="left-label">
                </div>
                <div class="border-layout">
                    <div class="inner-row">
                        <div class="inner-left_label"><label>独家/非独家</label></div>
                        <div class="inner-right_input">
                            <a-radio-group :options="formState.projectSource"
                                v-model:value="formState.projectCheckedValue" :disabled="true" />
                        </div>
                    </div>

                    <div class="inner-row margin-top_20">
                        <div class="inner-left_label"><label>备注</label></div>
                        <div class="inner-right_input">
                            <a-input v-model:value="formState.markInputValue" disabled="true" style="width: 70%;" />
                        </div>
                    </div>

                    <div class="inner-row margin-top_20">
                        <div class="inner-left_label"><label>可授权年限</label></div>
                        <div class="inner-right_input">
                            <a-range-picker v-model:value="formState.innerDateRange" @change="changeFunc"
                                @ok="okFunc" />
                        </div>
                    </div>

                    <div class="inner-row margin-top_20">
                        <div class="inner-left_label"><label>补充说明</label></div>
                        <div class="inner-right_input">
                            <a-input v-model:value="formState.markInputValue" disabled="true" style="width: 70%;" />
                        </div>
                    </div>
                </div>
            </div>

            <div class="item-layout margin-top_20">
                <div class="left-label"><label class="margin-left_5">维权权利：</label>
                </div>
                <div class="right-input">
                    <a-radio-group :options="formState.projectSource" v-model:value="formState.projectCheckedValue"
                        :disabled="true" />
                </div>
            </div>

            <div class="item-layout margin-top_20">
                <div class="left-label"><label class="margin-left_5">报审情况：</label>
                </div>
                <div class="right-input">
                    <a-checkbox-group v-model:value="formState.inlandValue" name="inlandCheckBox"
                        :options="formState.inlandOptions" disabled="true" />
                </div>
            </div>

            <div class="item-layout margin-top_20">
                <div class="left-label"><label class="margin-left_5">片方报价：</label>
                </div>
                <div class="right-input">
                    <a-input v-model:value="formState.markInputValue" disabled="true" style="width: 70%;" />
                    <a-select v-model:value="formState.levelSelected" size="middle" :options="formState.levelOptions"
                        :disabled="true" style="width:50%;text-align: left;">
                    </a-select>
                </div>
            </div>

        </div>
        <!-- 基础信息 -->
        <div class="project-info">
            <a-divider>基础信息</a-divider>

            <div class="item-layout">
                <div class="left-label"><label class="margin-left_5">英文名称：</label>
                </div>
                <div class="right-input">
                    <a-input v-model:value="formState.markInputValue" disabled="true" style="width: 70%;" />
                </div>
            </div>

            <div class="item-layout margin-top_20">
                <div class="left-label"><label class="margin-left_5">又名：</label>
                </div>
                <div class="right-input">
                    <a-input v-model:value="formState.markInputValue" disabled="true" style="width: 70%;" />
                </div>
            </div>

            <div class="item-layout margin-top_20">
                <div class="left-label"><span style="color:red">*</span><label class="margin-left_5">导演：</label>
                </div>
                <div class="right-input">
                    <a-input v-model:value="formState.markInputValue" disabled="true" style="width: 70%;" />
                </div>
            </div>

            <div class="item-layout margin-top_20">
                <div class="left-label"><label class="margin-left_5">编剧：</label>
                </div>
                <div class="right-input">
                    <a-input v-model:value="formState.markInputValue" disabled="true" style="width: 70%;" />
                </div>
            </div>

            <div class="item-layout margin-top_20">
                <div class="left-label"><span style="color:red">*</span><label class="margin-left_5">主演：</label>
                </div>
                <div class="right-input">
                    <a-input v-model:value="formState.markInputValue" disabled="true" style="width: 70%;" />
                </div>
            </div>

            <div class="item-layout margin-top_20">
                <div class="left-label"><label class="margin-left_5">当前季数：</label>
                </div>
                <div class="right-input">
                    <a-input v-model:value="formState.markInputValue" disabled="true" style="width: 70%;" />
                </div>
            </div>


            <div class="item-layout margin-top_20">
                <div class="left-label"><span style="color:red">*</span><label class="margin-left_5">集数：</label>
                </div>
                <div class="right-input">
                    <a-input v-model:value="formState.markInputValue" disabled="true" style="width: 70%;" />集
                </div>
            </div>


            <div class="item-layout margin-top_20">
                <div class="left-label"><label class="margin-left_5">时长：</label>
                </div>
                <div class="right-input">
                    <a-input v-model:value="formState.markInputValue" disabled="true" style="width: 70%;" />分钟
                </div>
            </div>

            <div class="item-layout margin-top_20">
                <div class="left-label"><span style="color:red">*</span><label class="margin-left_5">原生语言：</label>
                </div>
                <div class="right-input">
                    <a-select v-model:value="formState.levelSelected" size="middle" :options="formState.levelOptions"
                        :disabled="true" style="width:50%;text-align: left;">
                    </a-select>
                </div>
            </div>

            <div class="item-layout margin-top_20">
                <div class="left-label"><label class="margin-left_5">字幕语言：</label>
                </div>
                <div class="right-input">
                    <a-select v-model:value="formState.levelSelected" size="middle" :options="formState.levelOptions"
                        :disabled="true" style="width:50%;text-align: left;">
                    </a-select>
                </div>
            </div>

            <div class="item-layout margin-top_20">
                <div class="left-label"><label class="margin-left_5">配音语言：</label>
                </div>
                <div class="right-input">
                    <a-select v-model:value="formState.levelSelected" size="middle" :options="formState.levelOptions"
                        :disabled="true" style="width:50%;text-align: left;">
                    </a-select>
                </div>
            </div>

            <div class="item-layout margin-top_20">
                <div class="left-label"><label class="margin-left_5">国际声轨：</label>
                </div>
                <div class="right-input">
                    <a-radio-group :options="formState.projectSource" v-model:value="formState.projectCheckedValue"
                        :disabled="true" />
                </div>
            </div>

            <div class="item-layout margin-top_20">
                <div class="left-label"><label class="margin-left_5">类型/风格：</label>
                </div>
                <div class="right-input">
                    <a-select v-model:value="formState.levelSelected" size="middle" :options="formState.levelOptions"
                        :disabled="true" style="width:50%;text-align: left;">
                    </a-select>
                </div>
            </div>


            <div class="item-layout margin-top_20">
                <div class="left-label"><label class="margin-left_5">首播/上映年份：</label>
                </div>
                <div class="right-input">
                    <a-date-picker v-model:value="formState.debutYear" picker="year" disabled="true" />
                </div>
            </div>


            <div class="item-layout margin-top_20">
                <div class="left-label"><span style="color:red">*</span><label class="margin-left_5">制片国家或地区：</label>
                </div>
                <div class="right-input">
                    <a-select v-model:value="formState.levelSelected" size="middle" :options="formState.levelOptions"
                        :disabled="true" style="width:50%;text-align: left;">
                    </a-select>
                </div>
            </div>

            <div class="item-layout margin-top_20">
                <div class="left-label"><span style="color:red">*</span><label class="margin-left_5">制片年份：</label>
                </div>
                <div class="right-input">
                    <a-select v-model:value="formState.levelSelected" size="middle" :options="formState.levelOptions"
                        :disabled="true" style="width:50%;text-align: left;">
                    </a-select>
                </div>
            </div>

            <div class="item-layout margin-top_20">
                <div class="left-label"><span style="color:red">*</span><label class="margin-left_5">故事梗概：</label>
                </div>
                <div class="right-input">
                    <a-textarea v-model:value="formState.descInputValue"
                        style="width:100%;height: 200px;background: #fff;" :disabled="true" />
                </div>
            </div>

            <div class="item-layout margin-top_20">
                <div class="left-label"><label class="margin-left_5">播出平台：</label>
                </div>
                <div class="right-input">
                    <a-input v-model:value="formState.markInputValue" disabled="true" style="width: 70%;" />
                </div>
            </div>

            <div class="item-layout margin-top_20">
                <div class="left-label"><label class="margin-left_5">制片公司：</label>
                </div>
                <div class="right-input">
                    <a-input v-model:value="formState.markInputValue" disabled="true" style="width: 70%;" />
                </div>
            </div>

            <div class="item-layout margin-top_20">
                <div class="left-label"><label class="margin-left_5">发行公司：</label>
                </div>
                <div class="right-input">
                    <a-input v-model:value="formState.markInputValue" disabled="true" style="width: 70%;" />
                </div>
            </div>

            <div class="item-layout margin-top_20">
                <div class="left-label"><label class="margin-left_5">海报：</label>
                </div>
                <div class="right-input">
                    <a-input v-model:value="formState.markInputValue" disabled="true" style="width: 70%;" />
                </div>
            </div>

            <div class="item-layout margin-top_20">
                <div class="left-label"><label class="margin-left_5">剧照：</label>
                </div>
                <div class="right-input">
                    <a-input v-model:value="formState.markInputValue" disabled="true" style="width: 70%;" />
                </div>
            </div>

            <div class="item-layout margin-top_20">
                <div class="left-label"><label class="margin-left_5">片花：</label>
                </div>
                <div class="right-input">
                    <a-input v-model:value="formState.markInputValue" disabled="true" style="width: 70%;" />
                </div>
            </div>

            <div class="item-layout margin-top_20">
                <div class="left-label"><label class="margin-left_5">样片：</label>
                </div>
                <div class="right-input">
                    <a-input v-model:value="formState.markInputValue" disabled="true" style="width: 70%;" />
                </div>
            </div>

        </div>
        <!-- 补充信息 -->
        <div class="supplement-info">
            <a-divider>补充信息</a-divider>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { reactive, onMounted, ref } from "vue";
import ProjectDetailLabelRadio from "@/components/page/projectDetail-labelRadio.vue";
import DetailLableSelect from '@/components/page/projectDetail-select.vue';
import LabelTextarea from "@/components/formItem/label-textarea.vue";
import LabelInput from "@/components/formItem/label-input.vue";
import LabelDatePicker from "@/components/formItem/label-datePicker.vue";
import { LineHeightOutlined } from "@ant-design/icons-vue";
const props = defineProps({
    id: {
        type: Number,
        default: 0
    }
})
let formState = reactive({
    id: props.id,
    projectSource: [] as any[],
    projectCheckedValue: '非独家',
    outSourceValue: '独家',
    levelSelected: '首轮授权',
    levelOptions: [
        {
            value: '首轮授权',
            label: '首轮授权'
        }, {
            value: 'lucy',
            label: 'Lucy',
        },
    ],
    descInputValue: '',
    inlandValue: ['电视权利'],
    inlandOptions: ['电视权利', '新媒体权利'],
    foreignValue: ['电视权利'],
    foreignOptions: ['电视权利', '新媒体权利'],
    markInputValue: '',
    innerDateRange: [],
    debutYear: '',
});

const markInputValue = ref('123');
// 项目信息来源
formState.projectSource = [
    { label: '独家', value: '独家' },
    { label: '非独家', value: '非独家' },
]
onMounted(async () => {
    // const result = await get(`/api/exam/get?id=${props.id}`);
    // Object.assign(formState, result)
});

const changeFunc = () => { };
const okFunc = () => { };
</script>

<style lang="less" scoped>
// .ant-input[disabled] {
//     background: #fff;
// }

.single-page {
    display: flex;
    flex-direction: column;
    align-items: center;

    .project-info {
        width: 90%;
    }

    .item-layout {
        display: flex;
        // align-items: center;

        .left-label {
            width: 16%;
            display: flex;
            justify-content: end;
        }

        .special-layout {
            width: 84%;
            display: flex;
            justify-content: start;
            align-items: center;
            padding-left: 10px;
            flex-direction: column;
        }

        .inner-layout {
            width: 100%;
            display: flex;

        }

        .label-divider {
            display: inline-block;
            width: 1px;
            height: 1em;
            margin: 4px 8px;
            vertical-align: middle;
            position: relative;
            background-color: #dcdfe6;
        }

        .right-input {
            width: 84%;
            display: flex;
            justify-content: start;
            align-items: center;
            padding-left: 10px;
        }

        .border-layout {
            width: 60%;
            margin-left: 10px;
            border: 1px solid #dcdfe6;
            height: 220px;
            padding-top: 20px;
            border-radius: 5px;

            .inner-row {
                width: 100%;

                display: flex;
                align-items: center;

                .inner-left_label {
                    width: 30%;
                    display: flex;
                    justify-content: end;
                }

                .inner-right_input {
                    width: 60%;
                    padding-left: 10px;
                    display: flex;
                    justify-content: start;
                }
            }
        }
    }


}
</style>
<style lang="less" scoped>
@import "@/style/page.less";
</style>